<template>
    <div class="side" @click="hide" >
      <div>
        <ul>
          <li>
           <router-link to="/">
             首页 <span class="fa fa-angle-right"></span>
           </router-link>
          </li>
          <li>
            <router-link to="/cat">
              全部分类<span class="fa fa-angle-right"></span>
            </router-link>
          </li>
          <li>
            推荐<span class="fa fa-angle-right"></span>
          </li>
          <li>
            个人中心<span class="fa fa-angle-right"></span>
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
    export default{
      methods:{
          hide:function(){
              this.$emit('hideMenu')
          }
      }
    }
</script>
<style scoped>
  *{
    box-sizing:border-box;
  }
  .side{
    width:100%; height:100vh; position:fixed; overflow: hidden; top:0;
    /*background:yellow; */
    z-index:5;
  }
  .side div{
    position:absolute; width:100%; top:45px;
    /*background:#ccc;*/
  }
  .side ul{
    margin:0; padding:0; list-style:none; background:#282828; color:#666;
    border-top:solid 1px #666; width:calc(100% - 100px); height:100vh;
    font-size:2rem;
  }
  .side ul li{
    line-height:50px; border-bottom:solid 1px #666; padding-left:20px;
  }
  .side ul li span{
    float:right; line-height:50px; margin-right:30px;
  }
  .slide ul li a{
    color:#fff;
  }
</style>
